<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>amis admin</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta
            name="viewport"
            content="width=device-width, initial-scale=1, maximum-scale=1"
    />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <link
            rel="stylesheet"
            title="default"
            href="sdk.css"
    />
    <link
            rel="stylesheet"
            title="default"
            href="helper.css"
    />
    <script src="sdk.js"></script>
    <script src="index.js"></script>
    <script src="jquery-3.6.0.slim.min.js"></script>
    <link rel="stylesheet" href="iconfont.css" />
    <script src="https://unpkg.com/history@4.10.1
/umd/history.js"></script>
    <style>
        html,
        body,
        .app-wrapper {
            position: relative;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .amis-scope .cxd-Layout-footer {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 0;
        }

        .app-wrapper{height:100%;}
        .pull-pre{height:3em;background:red;}
        .pull-wrapper1{width:80%;height:100%;overflow-y:scroll;background:yellow;}
        .pull-wrapper2{width:80%;overflow-y:scroll;}
        .box{height:200px;background:green;}
        .xx{position: absolute;right:0px;top: 0px;}
    </style>
</head>
<body>
    <div  class="app-wrapper" style="width:100%;">

        <div class="pull-wrapper1">
            <div class="pull-wrapper2" >
                <div class="pull-pre">
                    下拉等待
                </div>
                <div class="data">
                    <div class="box">1</div>
                    <div class="box">1</div>
                    <div class="box">1</div>
                    <div class="box">1</div>
                    <div class="box">1</div>
                    <div class="box">1</div>
                    <div class="box">1</div>
                    <div class="box">1</div>
                </div>
            </div>
        </div>

    </div>

</body>
<script>
var scrolltop1 = $(".pull-pre").height();
$(".pull-wrapper2").height(scrolltop1+$(".pull-wrapper1").height());

$(".pull-wrapper1").scrollTop(scrolltop1);

$(".pull-wrapper1")[0].addEventListener('touchmove',function (event) {
    //滑动会触发touchmove 但是时机比较随机  但是当滑动底部时候会触发这个钩子
    //第一次滑动底部时候不会触发浏览器的下拉 这样就可以根据这个来 阻止浏览器或者微信的下拉
    //利用此来完成下拉刷新
    //ios 浏览器则是好像如果在div有滑动就不会触发浏览器的滑动 所以也实现了该功能
    if($(".pull-wrapper1").scrollTop()<scrolltop1-1){
        event.preventDefault()
    }
},{passive:false})

$(".pull-wrapper1")[0].addEventListener('touchend',function (event) {
    if($(".pull-wrapper1").scrollTop()<scrolltop1-1) {
        if ($(".pull-wrapper1").scrollTop() < scrolltop1 / 2) {
            alert("刷新");
        }
        if ($(".pull-wrapper1").scrollTop() >= scrolltop1 / 2) {
            alert("不刷新");
        }
        $(".pull-wrapper1").scrollTop(scrolltop1);
    }
},{passive:false})






</script>
</html>
